<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React.Component()创建组件</title>
</head>
<body>
	<div id="container"></div>
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">
	class Hello extends React.Component{
		constructor(props){
			//调用父类的构造函数
			super(props);
			// 设置 initial state
	        this.state = {
	            title: props.title || 'placeholder'
	        };
		}
		//方式一：定义props默认值(如果调用组件的时候没有通过自定义属性传参，则使用此处设置的默认值)
		static defaultProps = {
		   title: '默认标题',  
		   description: '默认描述'
		}
		 
		//参数类型校验(React.PropTypes为undefined)  
		//static propTypes = {
		   // title:React.PropTypes.string
		//}
		  
		  // handleClick() {
		  //   //点击事件的处理函数
		  // }

		//避免组件进行不必要的重新渲染,优化性能(该函数返回true,怎重新渲染，否则不会重新渲染)
		shouldComponentUpdate(nextProps, nextState) {
		    if (this.props.title !== nextProps.title) { 	
		      return true;
		    }
		    if (this.state.description !== nextState.description) {
		      return true;
		    }
		    return false;
		}  
  
		render(){
			return <div>
				<p>{this.props.title}</p>	
				<p>{this.props.description}</p>
			</div>
		}
	}
	
	//方式二：定义props默认值
	// Hello.defaultProps = {
	//    title: '默认标题',  
	//    description: '默认描述'
	// }
	
	//方式二：props数据类型校验
	Hello.propTypes = {
	  // name: React.PropTypes.string
	};

	ReactDOM.render(
		<Hello title="自定义组件标题" description="自定义组件描述"/>,
		document.querySelector('#container')
	);
</script>
</html>